<template>
    <div class="aiDesign">
        <div class="icon"></div>
        <div class="back">
            <div class="titleBar">
              <div class="title">AI设计教学生成</div>
              <div class="title2">AI一下，让备课更简单</div>
            </div>
            <div class="hint">请在上方搜索框中输入你要备课的 
              <div class="hint2">课程主题，教学目标，课程时长，学科</div>等
            </div>
            <div class="example">
                <input
                   v-model="input"
                   placeholder="课程主题，教学目标，课程时长，学科"
                   class="example-input"
                />
            </div>
            <div class="hint3">或者在下方选择一些教学设计关键词和选项</div>
            <div class="select-board">
                <div v-for="item in values" :key="item.id" style="margin-right: 60px;">
                    <div class="select-wrapper">
                      <select v-model="item.prop" class="selector" @change="updateSearchInput">
                        <option disabled selected :label="item.placeholder" value=""/>
                        <option
                            v-for="selectBar in item.arr"
                            :key="selectBar.id"
                            :label="selectBar.label"
                            :value="selectBar.label"
                        />
                      </select>
                    </div>
                </div>
            </div>
        </div>
        <el-button color="rgba(115, 169, 255, 0.51)" round class="back-button" @click="backUp">返回</el-button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { arr1, arr2, arr3, arr4 } from './components/arr';
import { useSearchStore } from '@/stores/search'
import { useRouter } from 'vue-router';
const searchStore = useSearchStore()
const router = useRouter()
const input = ref('比如输入“制作一份关于集合的教案，适合高一学生学习的，较为简单的教案；要安排10~15题练习；教学时长为1h')
type FormKeys = 'topic' | 'target' | 'time' | 'grade'; 
const values = ref([
    {
        id: 1,
        prop: searchStore.planForm.topic as FormKeys,
        placeholder: '课程主题',
        arr: arr1
    },
    {
        id: 2,
        prop: searchStore.planForm.target as FormKeys,
        placeholder: '教学目标',
        arr: arr2
    },
    {
        id: 3,
        prop: searchStore.planForm.time as FormKeys,
        placeholder: '课程时长',
        arr: arr3
    },
    {
        id: 4,
        prop: searchStore.planForm.grade as FormKeys,
        placeholder: '教学年级',
        arr: arr4
    }
])
const updateSearchInput = () => {
    let info = '';
    values.value.forEach(item => {
        if (item.id === 1) {
            searchStore.planForm.topic = item.prop;
        } else if (item.id === 2) {
            searchStore.planForm.target = item.prop;
        } else if (item.id === 3) {
            searchStore.planForm.time = item.prop;
        } else if (item.id === 4) {
            searchStore.planForm.grade = item.prop;
        }
        if (item.prop) {
            info += `${item.placeholder}: ${item.prop}, `;
        }
    });
    info = info.replace(/,\s*$/, '');
    searchStore.searchInput = info;
};
function backUp(){
   router.push('/')
}
</script>

<style scoped lang="less">
@import url('@/views/lesson-design/index.less');
</style>